<template>
  <a-row>
      <a-input-search v-model:value="searchKey" placeholder="请输入油管公称尺寸" style="width: 200px; margin-bottom: 10px;"
          @search="onSearch()" />
  </a-row>

  <a-table :rowKey="(record) => record.id" :row-selection="rowSelection" :dataSource="dataSource" :columns="columns"
      bordered :scroll="{ x: 1000 }" :pagination="false">
      <template #bodyCell="{ column, text, record }">
          {{ text }}
      </template>
  </a-table>
  <AntdZh>
      <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
  </AntdZh>
</template>
<script setup>
import { ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { queryList } from "@/api/tool/tubing.js";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const total = ref(1)
const modalRef = ref(null);
const data = reactive({
  form: {}
});
const { form } = toRefs(data);
const dataSource = ref([]);
// 定义表格列配置
const columns = [
{
      title: '公称尺寸(in)',
      dataIndex: 'nominalSize',
      key: 'nominalSize',
      fixed:'left',
      width: 150
  },
  {
      title: '不加厚接箍外径(mm)',
      dataIndex: 'couplingOuterDiameter',
      key: 'couplingOuterDiameter',
      width: 170
  },
  {
      title: '不加厚内径(mm)',
      dataIndex: 'innerDiameter',
      key: 'innerDiameter',
      width: 150
  },
  {
      title: '不加厚外径(mm)',
      dataIndex: 'outerDiameter',
      key: 'outerDiameter',
      width: 150
  },
  {
      title: '加厚接箍外径(mm)',
      dataIndex: 'thickenedCouplingOuterDiameter',
      key: 'thickenedCouplingOuterDiameter',
      width: 150
  },
  {
      title: '加厚内径(mm)',
      dataIndex: 'thickenedInnerDiameter',
      key: 'thickenedInnerDiameter',
      width: 130
  },
  {
      title: '加厚外径(mm)',
      dataIndex: 'thickenedOuterDiameter',
      key: 'thickenedOuterDiameter',
      width: 150
  }
];
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });

const rowSelection = {
  type: 'radio',
  onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      localStorage.setItem("selectTubings", JSON.stringify(selectedRows));
  },
  // getCheckboxProps: record => ({
  //     cableId: record.cableId,
  // }),
};

/** 查询井列表 */
function getList() {
  queryList(query.value).then((response) => {
      dataSource.value = response.content;
      total.value = response.totalElements;
  });
}
getList();

/** 搜索按钮操作 */
function onSearch() {
  query.value.searchKey = searchKey;
  getList();
}

/** 表单重置 */
function reset() {
  searchKey.value = '';
  query.value = {
      pageNum: 1, pageSize: 10, sortBy: 'id',
      searchKey: '',
  }
  getList();
}
</script>
